import React from 'react'
import {
  Switch,
  Route,
  Link,
  Redirect,
  useParams,
  useRouteMatch
} from "react-router-dom";

export default function RecursivePath() {
  return (
    <div>
      <Switch>
        <Route path="/:id">
          <Person></Person>
        </Route>
        <Redirect from="/" to="/0"></Redirect>
      </Switch>
    </div>
  )
}

const PEEPS = [
  { id: 0, name: "Michelle", friends: [1, 2, 3] },
  { id: 1, name: "Sean", friends: [0, 3] },
  { id: 2, name: "Kim", friends: [0, 1, 3] },
  { id: 3, name: "David", friends: [1, 2] }
];

const find = id => PEEPS.find(item => item.id === ~~id )

function Person() {
  let { url } = useRouteMatch() // url 当前匹配
  let { id } = useParams()
  let person = find(id)
  return (
    <>
      <h1>{ person.name }的朋友</h1>

      <ul>
        {person.friends.map(id => {
          return (
            <li key={id}><Link to={`${url}/${id}`}>{find(id).name}</Link></li>
          )
        })}
      </ul>
      <Switch>
        <Route path={`${url}/:id`}>
          <Person></Person>
        </Route>
      </Switch>
    </>
  )
}



